<template>
    <div>
        <div id="family" style="width: 100%;height:326px;"></div>
    </div>
</template>
<script>
import {formatDate} from "../assets/tool/common"
export default {
    props: {
        infos: Object,
        data: Array
    },
    data(){
        return {
            nameList:{
                '0D0D-E927-AD79-6A65': '极Ⅰ低端阀冷系统',
                '2627-EB48-7F10-BCCF': '极Ⅰ高端阀冷系统',
                'FFA4-EB6C-15A8-3C32': '极Ⅱ低端阀冷系统',
                '30E4-EDC0-F9C0-817D': '极Ⅱ高端阀冷系统'
                // '10M51111155825988': '极1低端阀冷系统',
                // '10M51111155825991': '极1高端阀冷系统',
                // '10M51111155825989': '极2低端阀冷系统',
                // '10M51111155825990': '极2高端阀冷系统'
            },

            // nameList:{
            //     'C038-61C1-FD29-E6BA': '极1低端阀冷系统',
            //     'C23A-2A8B-92C5-AAF3': '极1高端阀冷系统',
            //     '5915-F9BD-AC1E-92DC': '极2低端阀冷系统',
            //     '1F9E-E209-0011-5C91': '极2高端阀冷系统'
            // },
            lists:{
                T_In_Valve:{
                    name:"进阀温度",
                    unit:'℃'
                },
                T_Out_Valve:{
                    name: "出阀温度",
                    unit:'℃'
                },
                F_Of_CW:{
                    name: "冷却水流量",
                    unit:'L/s'
                },
                P_In_Valve:{
                    name:"进阀压力",
                    unit:'MPa'
                },
                P_Out_Valve:{
                    name:"出阀压力",
                    unit:'MPa'
                },
                L_In_Tank:{
                    name:"膨胀罐液位",
                    unit:'%'
                },
                P_In_Tank:{
                    name:"膨胀罐压力",
                    unit:'MPa'
                },
                L_rep_Tank:{
                    name:"补水罐液位",
                    unit:'%'
                },
                CW_Conduct:{
                    name:"冷却水电导率",
                    unit:'μs/cm'
                },
                DW_Conduct:{
                    name:"去离子水电导率",
                    unit:'μs/cm'
                },
                F_Of_DW:{
                    name:"去离子水流量",
                    unit:'L/s'
                },
                VB01_Feedback:{
                    name:"VB01电动比例阀开度",
                    unit:'%'
                },
                VB02_Feedback:{
                    name:"VB02电动比例阀开度",
                    unit:'%'
                },
                T_Of_H01:{
                    name:"H01电加热器温度",
                    unit:'℃'
                },
                T_Of_H02:{
                    name:"H02电加热器温度",
                    unit:'℃'
                },
                T_Of_H03:{
                    name:"H03电加热器温度",
                    unit:'℃'
                },
                P01currentA:{
                    name:"P01主泵电机电流",
                    unit:'A'
                },
                P02currentA:{
                    name:"P02主泵电机电流",
                    unit:'A'
                },
                L_Buffer_Pool:{
                    name:"缓冲水池液位",
                    unit:'%'
                },
                BP_Conduct:{
                    name:"喷淋水电导率",
                    unit:'μs/cm'
                },
                Freq_M01_Feedback:{
                    name:"M01风机运行频率",
                    unit:'Hz'
                },
                Freq_M02_Feedback:{
                    name:"M02风机运行频率",
                    unit:'Hz'
                },
                Freq_M03_Feedback:{
                    name:"M03风机运行频率",
                    unit:'Hz'
                },
                Freq_M04_Feedback:{
                    name:"M04风机运行频率",
                    unit:'Hz'
                },
                Freq_M05_Feedback:{
                    name:"M05风机运行频率",
                    unit:'Hz'
                },
                Freq_M06_Feedback:{
                    name:"M06风机运行频率",
                    unit:'Hz'
                },
                Freq_E5_P01_Feedback:{
                    name:"P01高压泵运行频率",
                    unit:'Hz'
                },
                P_In_E5_PT01:{
                    name:"PT01高压泵进水压力",
                    unit:'MPa'
                },
                P_Out_E5_PT02:{
                    name:"PT02高压泵出水压力",
                    unt:'MPa'
                },
                P_In_E5_PT03:{
                    name:"PT03反渗透二段膜组件进水压力",
                    unit:'MPa'
                },
                P_In_E5_PT04:{
                    name:"PT04反渗透三段膜组件进水压力",
                    unit:'MPa'
                },
                P_discharge_E5_PT05:{
                    name:"PT05反渗透浓水排放压力",
                    unit:'MPa'
                },
                QIT01_Conduct:{
                    name:"QIT01反渗透入水电导率",
                    unit:'μS/cm'
                },
                QIT02_Conduct:{
                    name:"QIT02反渗透产水电导率",
                    unit:'μS/cm'
                },
                F_Of_FIT01:{
                    name:"FIT01反渗透产水流量",
                    unit:'m3/h'
                },
                ORPO_electric:{
                    name:"ORP0氧化还原电位",
                    unit:'mV'
                },
                F_Of_FIT02:{
                    name:"FIT02反渗透浓水流量",
                    unit:'m3/h'
                },
                T_In_Hall:{
                    name:"阀厅温度",
                    unit:'℃'
                },
                H_In_Hall:{
                    name:"阀厅湿度",
                    unit:'%'
                },
                Envi_temp:{
                    name:"室外温度",
                    unit:'%'
                },
                T_Condensation:{
                    name:"凝露温度",
                    unit:'%'
                }
            },
        }
    },
    computed:{
        timeData(){
            return formatDate(this.data[0])+" - "+formatDate(this.data[1])
        }
    },
    mounted(){
        this.getMap()
    },
    methods:{
        getMap() {
            var legend = []
            var series = []
            var unit = ''

            unit = this.lists[this.infos.unit].unit
            for(const key in this.infos.resultLists){

                var item = this.infos.resultLists[key]
                legend.push(this.nameList[key])
                series.push({
                    name:this.nameList[key],
                    type: 'line',
                    data: item
                })
            }

            // var _self = this

            var myChart = this.$echarts.init(document.getElementById('family'))
            let option = {
                title: {
                    // text: unit,
                    // textStyle:{
                    //     color:"#FFFFFF",
                    //     fontSize:14
                    // },
                    subtext: '    '+unit,
                    subtextStyle:{
                        color:"#FFFFFF",
                        fontSize:14
                    },
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    show:true,
                    data: legend,
                    textStyle:{
                        color:"#FFFFFF"
                    },
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        dataView: {readOnly: false},
                        magicType: {type: ['line', 'bar']},
                        restore: {},
                        saveAsImage: {}
                    }
                },
                grid: {
                    left: '2%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                textStyle: {
                    color: '#ffffff',
                    fontSize: 12
                },
                dataZoom: [{                 // 内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系 
                    type: 'inside',
                    start: 0,
                    end: 100
                }],
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: this.infos.timers
                },
                yAxis: {
                    type: 'value',
                    axisLabel:{
                        formatter:'{value}'
                    },
                    splitLine: { //网格线
                        show: false
                    }
                },
                series: series
            }; 
            
            myChart.setOption(option)
        }
    }
}
</script>
